<script setup lang="ts">
import img from "@/assets/img";
import {ref} from 'vue';

import {AiFillCheckCircle, AiOutlineHome} from "vue-icons-plus/ai";
import {BsFileEarmarkText, BsPerson} from "vue-icons-plus/bs";
import {RiCompassDiscoverFill} from "vue-icons-plus/ri";
import {BiSolidDownArrow, BiSolidRightArrow} from "vue-icons-plus/bi";
import {UserApi} from "@/api";

interface FoodItem {
  id: number;
  name: string;
  price: number;
  count: number;
}

interface OrderData {
  items: FoodItem[];
  totalPrice: number;
}

const orderData = ref<OrderData>({
  items: [],
  totalPrice: 0,
});

const restoreOrderData = () => {
  const savedOrderData = sessionStorage.getItem('orderData');
  if (savedOrderData) {
    orderData.value = JSON.parse(savedOrderData);
  }
};
let id = ref('');
onMounted(() => {
  restoreOrderData();
  const order_id = sessionStorage.getItem('order_id');
  if (order_id) {
    id.value = order_id;
  }
});
const showDetails = ref(false);
function toggleDetails() {
  showDetails.value = !showDetails.value;
}
const showr = ref(true);
const showb = ref(false);
function showdetail() {
  showr.value = false;
  showb.value = true;
}
const handleClick = () => {
  toggleDetails();
  if (showDetails.value) {
    showdetail();
  } else {
    showr.value = true;
    showb.value = false;
  }
};
const showCheckCircle = ref<string | null>(null);
function toggleCheckCircle(type: string) {
  if (showCheckCircle.value === type) {
    showCheckCircle.value = null;
  } else {
    showCheckCircle.value = type;
  }
}

const api = new UserApi()
const payment = () => {
  api.changeOrderStatus(id.value).then((res) => {
    ElMessage.success('支付成功');
  }).catch((error) => {
    ElMessage.error('支付失败');
  });
};
const rout = useRouter();
function main(){
  rout.push('/main');
}
function myorder(){
  payment()
  rout.push('/myorders');
}
</script>

<template>
  <div class="w-full h-full pos-fixed">
    <header class="w-full h-12vw bg-#0097FF flex items-center justify-center pos-fixed left-0 top-0 z-100">
      <p class="color-#fff text-4.8vw select-none">在线支付</p>
    </header>

    <h3 class="mt-12vw box-border pt-4vw pl-4vw  text-3.5vw font-400 color-#999 select-none">订单信息 :</h3>
    <div @click="handleClick"  class="select-none cursor-pointer box-border p-4vw text-4vw color-#666 flex justify-between items-center">
      <div class="flex flex-wrap">
      <p>万家饺子(软件园E18店)</p>
      <BiSolidRightArrow v-if="showr" class="w-2.5vw h-2.5vw color-#666 mt-2 ml-2"></BiSolidRightArrow>
      <BiSolidDownArrow v-if="showb" class="w-2.5vw h-2.5vw color-#666 mt-2 ml-2"></BiSolidDownArrow>
      </div>
      <p class="color-#FF4500FF">&#165;{{orderData.totalPrice}}</p>
    </div>
    <ul v-if="showDetails && orderData.items.length > 0" class="w-full">
      <li v-for="item in orderData.items" :key="item.id">
        <p>{{ item.name }} x {{ item.count }}</p>
        <p>&#165;{{ item.price * item.count }}</p>
      </li>
      <li>
        <p>配送费</p>
        <p>&#165;3</p>
      </li>
    </ul>

    <ul class="payment-type w-full select-none">
      <li @click="toggleCheckCircle('alipay')">
        <img :src="img.alipay" >
        <AiFillCheckCircle v-if="showCheckCircle === 'alipay'" class="color-#38CA73"></AiFillCheckCircle>
      </li>
      <li @click="toggleCheckCircle('wechat')">
        <img :src="img.wechat" >
        <AiFillCheckCircle v-if="showCheckCircle === 'wechat'" class="color-#38CA73"></AiFillCheckCircle>
      </li>
    </ul>
    <div class="w-full box-border p-4vw">
      <button @click="myorder" class=" w-full h-10vw color-#fff rounded-4px bg-#38CA73 ">确认支付</button>
    </div>
    <ul class="footer w-full h-14vw flex items-center justify-around pos-fixed left-0 bottom-0 border-solid border-t-1px border-#DDD">
      <li @click="main">
        <AiOutlineHome></AiOutlineHome>
        <p >首页</p>
      </li>
      <li>
        <RiCompassDiscoverFill></RiCompassDiscoverFill>
        <p>发现</p>
      </li>
      <li @click="rout.push('/myorders');">
        <BsFileEarmarkText class="color-#0097ff"></BsFileEarmarkText>
        <p class="color-#0097ff">订单</p>
      </li>
      <li>
        <BsPerson></BsPerson>
        <p>我的</p>
      </li>
    </ul>
  </div>
</template>

<style scoped>
li{
  box-sizing: border-box;
  padding: 1vw 4vw;

  display: flex;
  justify-content: space-between;
  align-items: center;
}
li p{
  font-size: 3vw;
  color: #666;
}
.payment-type li{
  box-sizing: border-box;
  padding: 4vw;

  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor:pointer;
}
.payment-type li img{
  width: 33vw;
  height: 8.9vw;
}
.footer{
  width: 100%;
  height: 14vw;
  border-top: solid 1px #DDD;
  background-color: #fff;

  position: fixed;
  left: 0;
  bottom: 0;

  display: flex;
  justify-content: space-around;
  align-items: center;
}
.footer li{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  color: #999;
  user-select: none;
  cursor: pointer;
}
.footer li p{
  font-size: 2.8vw;
}
.footer li i{
  font-size: 5vw;
}

</style>